<!doctype html>
<html>
    <head>
        <!-- Title and Icon -->

        <title>Test Stun/Turn Servers</title>
        <link rel="shortcut icon" href="../images/logo.svg" />
        <link rel="apple-touch-icon" href="../images/logo.svg" />

        <!-- Meta Information -->

        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta name="description" content="MiroTalk P2P test Stun and Turn servers" />
        <meta name="keywords" content="webrtc, stun, turn, srflx, relay" />

        <!-- StyleSheet -->

        <link rel="stylesheet" href="../css/landing.css" />
        <link rel="stylesheet" href="../css/newcall.css" />

        <!-- JavaScripts -->

        <script async src="../js/umami.js"></script>

        <!-- xss -->

        <script src="../js/xss.js"></script>
    </head>

    <body>
        <div class="container">
            <h1>Test Stun/Turn Servers</h1>

            <hr />

            <pre id="ice" style="background: #000000; color: lime; overflow: auto"></pre>

            <hr />

            <p id="ip"></p>
            <p id="stun">🔴 The STUN server is NOT reachable!</p>
            <p id="turn">🔴 The TURN server is NOT reachable!</p>
            <p id="err"></p>

            <hr />

            <a href="https://github.com/miroslavpejic85/mirotalk/issues/108#issuecomment-1193087636" target="_blank">
                Check this out too</a
            >

            <hr />
        </div>

        <script>
            const Ice = document.getElementById('ice');
            const IP = document.getElementById('ip');
            const Stun = document.getElementById('stun');
            const Turn = document.getElementById('turn');
            const Err = document.getElementById('err');

            const qs = new URLSearchParams(window.location.search);

            let iceServers = filterXSS(qs.get('iceServers'));

            if (iceServers) {
                iceServers = JSON.parse(iceServers);
            } else {
                // http://localhost:3000/test
                iceServers = [
                    // Test some STUN server
                    {
                        urls: 'stun:stun.l.google.com:19302',
                    },
                    // Test some TURN server
                    // https://www.metered.ca/tools/openrelay/
                    {
                        urls: 'turn:a.relay.metered.ca:443',
                        username: 'e8dd65b92c62d3e36cafb807',
                        credential: 'uWdWNmkhvyqTEswO',
                    },
                ];
            }

            console.log('Check Ice Servers', iceServers);

            // Print iceServers config
            Ice.innerText = JSON.stringify(iceServers, null, 4);

            // Test the connections
            const pc = new RTCPeerConnection({
                iceServers,
            });

            pc.onicecandidate = (e) => {
                if (!e.candidate) return;

                console.log(e.candidate.candidate);

                // If a srflx candidate was found, notify that the STUN server works!
                if (e.candidate.type == 'srflx' || e.candidate.candidate.includes('srflx')) {
                    let ip = /\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/;
                    let address = e.candidate.address ? e.candidate.address : e.candidate.candidate.match(ip);
                    IP.innerText = '🟢 Your Public IP Address is ' + address;
                    Stun.innerText = '🟢 The STUN server is reachable!';
                }

                // If a relay candidate was found, notify that the TURN server works!
                if (e.candidate.type == 'relay' || e.candidate.candidate.includes('relay')) {
                    Turn.innerText = '🟢 The TURN server is reachable!';
                }
            };

            // handle error
            pc.onicecandidateerror = (e) => {
                console.error(e);
                Err.innerText = '⚠️ ' + e.errorText;
            };

            pc.createDataChannel('test');
            pc.createOffer().then((offer) => pc.setLocalDescription(offer));
        </script>
    </body>
</html>
